<template>
	<view class="bg">
		<view class="form">
			<view class="label">卡号：</view>
			<view class="value" :style="{'border-bottom':numberSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input class="uni-input" name="input" placeholder="请输入卡号" :value="cardNumber" @input="getCardNumber" :disabled="disabled"/>
			</view>
			<view class="label">账号：</view>
			<view class="value" :style="{'border-bottom':accountSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input class="uni-input" name="input" placeholder="请输入账号" :value="cardAccount" @input="getCardAccount" :disabled="disabled"/>
			</view>
			<view class="label">卡密：</view>
			<view class="value" :style="{'border-bottom':secretSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input class="uni-input" name="input" placeholder="请输入卡密" :value="cardSecret" @input="getCardSecret" :disabled="disabled" />
			</view>
			<view class="label" v-if="disabled">套餐：</view>
			<view class="value" v-if="disabled">
				<input class="uni-input" name="input" :value="mealName" disabled/>
			</view>
			<view class="label" v-if="disabled">生效时间：</view>
			<view class="value" :style="{'border-bottom':storageSelect?'1px solid #408CFF':'1px solid #e6e6e6'}" v-show="disabled">
				<radio-group class="radio-group" @change="timeChange" >
					<label class="radio"><radio color="#408CFF" style="transform:scale(0.7);font-size: 28upx;" value="NO" :checked="dictIsPreStorage=='NO'" /><text style="font-size: 28upx;">本月生效</text></label>
					<label class="radio" v-if="apply"><radio color="#408CFF" style="transform:scale(0.7);font-size: 28upx;margin-left: 20px;" value="YES" :checked="dictIsPreStorage=='YES'" /><text style="font-size: 28upx;">次月生效</text></label>
				</radio-group>
			</view>
			<view class="label" v-if="disabled">验证码：</view>
			<view class="code" :style="{'border-bottom':codeSelect?'1px solid #408CFF':'1px solid #e6e6e6'}" v-show="disabled">
				<input class="uni-input" name="input" placeholder="请输入验证码" :value="code" @input="getCode" maxlength="4"/>
				<image :src="url" @click="getCodeImg" style="width: 25%;" mode="widthFix"></image>
			</view>
		</view>
		<view class="bottom" v-show="!disabled">
			<button class="btn" @click="checkCardAccount">下一步</button>
		</view>
		<view v-show="disabled" class="bottom1">
			<button class="btn-half btn-left" @click="goBack">上一步</button>
			<button class="btn-half btn-right" :loading="loading" @click="onSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardNumber: '',				//卡号
				cardAccount: '',			//账号
				cardSecret: '',				//卡密
				mealName: '',				//套餐小类名称
				dictIsPreStorage: 'NO',		//生效时间 本月--NO  次月--YES
				code: '',					//验证码
				apply: false,				//当前卡绑定的套餐小类是否支持次月生效
				encryptedString:'',
				url: '',
				numberSelect: false,
				accountSelect: false,
				secretSelect: false,
				storageSelect: false,
				codeSelect: false,
				loading: false,
				disabled: false,
			}
		},
		methods: {
			//提交
			onSubmit(){
				if(this.dictIsPreStorage==''){
					uni.showToast({
					   title: '请选择生效类型',
					   icon: 'none',
					   duration: 2000		
					});
					return false
				}
				if(this.code==''){
					uni.showToast({
					   title: '请填写验证码',
					   icon: 'none',
					   duration: 2000		
					});
					return false
				}
				this.loading = true;
				this.$req.userRecharge('customer-order/updateSecret/imgcheck',{
					cardNumber: this.cardNumber,	//卡号
					id: this.cardAccount,			//账号
					secretStr: this.cardSecret,		//卡密
					dictIsPreStorage: this.dictIsPreStorage,	//生效时间
					imgCode: this.code,				//验证码
					uid: this.encryptedString,
				}).then(res=>{
					this.loading = false;
					if(res.data){
						uni.showToast({
						   title: '兑换成功',
						   icon: 'success',
						   duration: 2000		
						});
						this.cardNumber = '';
						this.cardAccount = '';
						this.cardSecret = '';
						this.dictIsPreStorage = 'NO';
						this.disabled = false;
						this.apply = false;
					}
				})
				this.code = '';
				this.encryptedString = '';
				this.url = '';
				this.getCodeImg()
			},
			//校验套餐信息
			checkCardAccount() {
				if(this.cardNumber==''){
					uni.showToast({
					    title: '请填写卡号',
						icon: 'none',
					    duration: 2000						
					});
					return false
				}
				if(this.cardAccount==''){
					uni.showToast({
					   title: '请填写账号',
					   icon: 'none',
					   duration: 2000		
					});
					return false
				}
				if(this.cardSecret==''){
					uni.showToast({
					    title: '请填写卡密',
					    icon: 'none',
					    duration: 2000		
					});
					return false
				}
				this.$req.userRecharge('customer-order/checkSecret',{
					cardNumber: this.cardNumber,
					id: this.cardAccount
				}).then(res=>{
					if(res.data&&res.data.mealName){
						this.mealName = res.data.mealName;
						this.apply = res.data.dictIsPreStorage=='YES'?true:false;
						this.disabled = true;
						this.code = '';
						this.encryptedString = '';
						this.url = '';
						this.getCodeImg();						
					}
				})
			},
			//返回上一步
			goBack(){
				this.disabled = false;
				this.mealName = '';
				this.dictIsPreStorage = 'NO';
				this.apply = false;
				this.code = '';
			},
			//获取验证码
			getCodeImg() {
				this.$req.sendCheck('code/send/pictureCode/uid', {}).then(res => {
					if (res._result) {
						this.encryptedString = res.data
						this.url = '/api/oceanside-send-and-check/code/send/pictureCode/' + res.data
					}
				})
			},
			getCardNumber(e){
				this.cardNumber = e.detail.value;  
				this.numberSelect = true;
				this.accountSelect = false;
				this.secretSelect = false;
				this.storageSelect = false;
				this.codeSelect = false;
			},
			getCardAccount(e){
				this.cardAccount = e.detail.value;  
				this.numberSelect = false;
				this.accountSelect = true;
				this.secretSelect = false;
				this.storageSelect = false;
				this.codeSelect = false;
			},
			getCardSecret(e){
				this.cardSecret = e.detail.value;  
				this.numberSelect = false;
				this.accountSelect = false;
				this.secretSelect = true;
				this.storageSelect = false;
				this.codeSelect = false;
			},
			getCode(e){
				this.code = e.detail.value;  
				this.numberSelect = false;
				this.accountSelect = false;
				this.secretSelect = false;
				this.storageSelect = false;
				this.codeSelect = true;
			},
			//选择生效时间
			timeChange(e){
				this.dictIsPreStorage = e.target.value;
				this.numberSelect = false;
				this.accountSelect = false;
				this.secretSelect = false;
				this.storageSelect = true;
				this.codeSelect = false;
			},
		}
	}
</script>

<style>
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		/* background-image: linear-gradient(to top, #fdfbfb 0%, white 100%); */
		overflow-y: scroll;
		background-color: #eeeee;
	}
	.form{
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 5% ;
	}
	.label{
		width: 100%;
		height: 80upx;
		position: relative;
		line-height: 80upx;
		font-size: 28upx;
		color: #333333;
		margin-top: 10px;
	}
	.value{
		width: 100%;
		height: 80upx;
		position: relative;
		border-bottom: 1px solid #e6e6e6;
	}
	.code{
		width: 100%;
		height: 80upx;
		position: relative;
		border-bottom: 1px solid #e6e6e6;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.uni-input {
	    height: 50upx;
	    padding: 7px 0;
	    line-height: 25px;
	    font-size: 30upx;
	    background: #FFF;
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	}
	.checkbox{
		width: 100%;
		height: 40upx;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 24upx;
		color: #777777;
		padding: 10upx 0;
		margin-bottom: 20upx;
	}
	.bottom{
		position: absolute;
		width: 90%;
		height: auto;
		bottom: 0;
		left: 0;
		padding: 20px 5%;
	}
	.bottom1{
		position: relative;
		width: 90%;
		height: auto;
		top: 0;
		left: 0;
		padding: 20px 5%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.btn-line{
		width: 100%;
		height: 80upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.btn{
		width: 100%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;
		background-image: linear-gradient(to bottom, #A0C6FF 0%, #408CFF 100%);
		letter-spacing: 5px;
	}
	.btn-half{
		width: 45%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 30upx;
		letter-spacing: 2px;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	.btn-left{
		border: 1px solid #408CFF;
		color: #408CFF;
	}
	.btn-right{
		background-image: linear-gradient(to bottom, #A0C6FF 0%, #408CFF 100%);
		color: #FFFFFF;
	}
</style>
